<template>
	<view>
		<block v-if="type == 1">
		  <view class="fourbox_item z-padding-24 z-margin-b-24 z-radius-20 " @click="detail">
		    <image class="fourbox_img" :src="cdn(info.image)" mode="aspectFill" lazy-load lazy-load-margin="0" />
		    <view class="fourbox_tip  z-margin-tb-16 z-radius-8 z-font-22">
		      最快{{info.response_hour}}小时上门
		    </view>
		    <view class="fourbox_name">
		      <view class="fourbox_name_left z-flex  z-margin-r-8 z-font-18" v-if="info.type === 0">
		        严选
		      </view>
		      <view class="fourbox_name_right hidden z-font-30">
		        {{info.name}}
		      </view>
		    </view>
		    <view class="fourbox_tips z-margin-tb-16 hidden text_999" v-if="info">
		      <block v-for="(item,index) in tool.split(info.tag_name,'|')">
		        <text class="text_999 z-font-22">{{item}}</text>
		        <text class="line z-margin-lr-8" v-if="index+1 < tool.split(info.tag_name,'|').length"></text>
		      </block>
		    </view>
		
		    <view class="price_box z-margin-t-16">
		      <view class="price_box_left">
		        <view class="z-font-22 z-margin-t-8">￥</view>
		        <view class="z-font-w">{{info.price}}</view>
		      </view>
		      <view class="price_box_right text_999 z-font-22">
		        已售{{info.salenums}}
		      </view>
		    </view>
		  </view>
		</block>
		
		<block v-else>
		  <view class="goodsitem z-padding-16 z-radius-16 z-margin-b-24" @click="detail">
		    <image :src="cdn(info.image)" class="goodsitem_img z-radius-16 z-margin-r-16 z-flex-0" mode="aspectFill"
		      lazy-load lazy-load-margin="0" />
		    <view class="goodsitem_right">
		      <view class="goodsitem_right_one">
		        <view class="goodsitem_right_one_left z-flex-1">
		          <view class="tip z-flex  z-font-18  z-margin-r-8" v-if="info.type === 0">严选</view>
		          <view class="hidden">{{info.name}}</view>
		        </view>
		        <view class="goodsitem_right_one_right z-font-24 z-flex-0  text_999">
		          已售{{info.salenums}}
		        </view>
		      </view>
		      <view class="hidden  z-margin-tb-8 text_999" v-if="info">
		        <block v-for="(item,index) in tool.split(info.tag_name,'|')">
		          <text class="text_999 z-font-22">{{item}}</text>
		          <text class="line z-margin-lr-8" v-if="index+1 < tool.split(info.tag_name,'|').length"></text>
		        </block>
		      </view>
		      <view class="goodsitem_right_three">
		        <view class="greentip z-font-18 z-padding-lr-8  z-radius-8">最快{{info.response_hour}}小时上门</view>
		        <view class="yellowtip z-font-18 z-margin-l-8 z-radius-8  z-padding-lr-8" v-if="info.shopname">
		          <image src="../static/index/shopname.png" class="shopname z-margin-r-8" mode="" />
		          <view class="">{{info.shopname}}</view>
		          <!-- <van-icon name="arrow" /> -->
		        </view>
		      </view>
		      <view class="goodsitem_right_four z-margin-t-8">
		        <view class="money">
		          <view class="z-font-22 z-margin-t-8">￥</view>
		          <view class="z-font-w">{{info.price}}</view>
		        </view>
		        <view class="buy z-flex z-font-22 z-radius-30">购买</view>
		      </view>
		    </view>
		  </view>
		</block>
	</view>
</template>

<script>
export default {
	name: 'service',
	props:['info','type'],
	// properties: {
	// 	info: Object,
	// 	type: {
	// 		type: Number,
	// 		value: 2
	// 	} //1竖排 2横排
	// },
	data() {
		return {};
	},
	methods:{
		detail(){
			this.$emit('serviceTap',this.info)
		}
	}
};
</script>

<style>
	.fourbox_item {
	  width: 330rpx;
	  background-color: #fff;
	  box-sizing: border-box;
	  flex-direction: column;
	}
	
	.fourbox_img {
	  width: 100%;
	  height: 282rpx;
	}
	
	.fourbox_tip {
	  color: #62CB81;
	  background: rgba(98, 203, 129, 0.1);
	  display: inline-block;
	  border: 1rpx solid #62CB81;
	  height: 32rpx;
	  line-height: 32rpx;
	  padding: 0 4rpx;
	}
	
	.fourbox_name {
	  display: flex;
	  align-items: center;
	}
	
	.fourbox_name_left {
	  color: #F7C566;
	  background-color: #1C274C;
	  width: 48rpx;
	  height: 28rpx;
	  border-radius: 4rpx;
	  flex-shrink: 0;
	}
	
	.fourbox_tips {
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	
	
	}
	
	.fourbox_tips_itme {
	  display: flex;
	  align-items: center;
	}
	
	.line {
	  width: 1rpx;
	  height: 18rpx;
	  background-color: #EDEEF1;
	  display: inline-block;
	}
	
	.shop_name_box {
	  display: flex;
	  align-items: center;
	}
	
	.shop_name {
	  background-color: #FCF7EE;
	  color: #DBAC54;
	  height: 32rpx;
	
	}
	
	.shop_name_img {
	  width: 25rpx;
	  height: 25rpx;
	}
	
	.price_box {
	  align-items: center;
	  justify-content: space-between;
	  display: flex;
	  color: var(--mainmoneycolor);
	}
	
	.price_box_left {
	  display: flex;
	  align-items: center;
	}
	
	
	.goodsitem{
	  background-color: #fff;
	  box-sizing: border-box;
	  display: flex;
	}
	.goodsitem_img{
	  width: 180rpx;
	  height: 180rpx;
	
	}
	.goodsitem_right{
	  flex: 1;
	  overflow: hidden;
	}
	.goodsitem_right_one{
	display: flex;
	align-items: center;
	justify-content: space-between;
	}
	.goodsitem_right_one_left{
	display: flex;
	align-items: center;
	overflow: hidden;
	}
	.tip{
	  color: #F7C566;
	  background-color: #1C274C;
	  width: 48rpx;
	  height: 28rpx;
	  border-radius: 4rpx;
	  flex-shrink: 0;
	}
	
	
	.goodsitem_right_three{
	  display: flex;
	  align-items: center;
	}
	.greentip{
	  background: rgba(98,203,129,0.1);
	  color: #62CB81;
	  border: 1rpx solid #62CB81;
	  height: 32rpx;
	  line-height: 32rpx;
	}
	.yellowtip{
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  background-color: #FCF7EE;
	  color: #DBAC54;
	  height: 32rpx;
	  border: 1rpx solid #FCF7EE;
	}
	.shopname{
	  width: 24rpx;
	  height: 24rpx;
	}
	.goodsitem_right_four{
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	}
	.money{
	  display: flex;
	  color:var(--mainmoneycolor);
	}
	.buy{
	  width: 104rpx;
	  height: 48rpx;
	  background:#62CB81;
	  color: #fff;
	}
</style>
